<template>
	<view class="movie-container" :style="{ backgroundImage: coverUrl }">
		<view class="detail-container">
			<view class="header">
				<view class="movie-cover"><image :src="movieDetails.movies.cover" mode=""></image></view>
				<view class="info">
					<view class="info-content">
						<text class="title">{{ movieDetails.movies.title }}</text>
						<text class="more">{{ movieDetails.region }}/{{ movieDetails.duration }} 剧情/喜剧/科幻 
						{{ movieDetails.release_year }}年1月1日上映</text>
						<text class="rating">
							<text class="iconfont icon-xingxing star"></text>
							{{ movieDetails.movies.rate }}
						</text>
					</view>
				</view>
			</view>

			<view class="buttons">
				<view class="want">
					<text class="iconfont icon-aixin"></text>
					想看
				</view>
				<view class="rate">
					<text class="iconfont icon-pingfen-copy"></text>
					评分
				</view>
			</view>

			<view class="plot-section">
				<view class="title">剧情</view>
				<view :class="['plot-content',{closed:isClosed}]">
					普通中年男子程勇（徐峥 饰）经营着一家保健品店，失意又失婚。不速之客吕受益（王传君
					饰）的到来，让他开辟了一条去印度买药做“代购”的新事业，虽然困难重重，但他在这条“买药之路”上发现了商机，一发不可收拾地做起了治疗慢粒白血病的印度仿制药独家代理商。赚钱的同时，他也认识了几个病患及家属，为救女儿被迫做舞女的思慧（谭卓
					饰）、说一口流利“神父腔”英语的刘牧师（杨新鸣 饰），以及脾气暴烈的“黄毛”（章宇
					饰），几个人合伙做起了生意，利润倍增的同时也危机四伏。程勇昔日的小舅子曹警官（周一围 饰）奉命调查仿制药的源头，假药贩子张长林（王砚辉
					饰）和瑞士正牌医药代表（李乃文 饰）也对其虎视眈眈，生意逐渐变成了一场关于救赎的拉锯战。 本片改编自慢粒白血病患者陆勇代购抗癌药的真实事迹。
				</view>
				<view class="extend-content">
					<view :hidden="!isClosed" id="open" class="open" @tap="handlePlotContent">
						展开 <text class="iconfont icon-xia"></text>
					</view>
					
					<view :hidden="isClosed" id="close" class="close" @tap="handlePlotContent">
						收起 <text class="iconfont icon-shang1 icon-close"></text>
					</view>
					
				</view>
			</view>

			<view class="actors-section">
				<view class="title">演职员</view>
				<scroll-view scroll-x enable-flex class="actors">
					<view class="actor" v-for="actor in movieDetails.actors" :key="actor">
						<image src="../../static/dehua.jpeg" mode=""></image>
						<text class="actor-name">{{ actor }}</text>
					</view>
				</scroll-view>
			</view>

			<view class="comments-section">
				<view class="title">短评</view>
				<view class="short-comment">{{ movieDetails.short_comment.content }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import request from '../../utils/request.js';
import '../../static/iconfont/iconfont.css';

export default {
	data() {
		return {
			id: '',
			movieDetails: {},
			coverUrl: '',
			isClosed:true
		};
	},
	onLoad(options) {
		this.id = options.id;
		this.getDetailsByMovieId();
	},
	methods: {
		async getDetailsByMovieId() {
			let { code, result } = await request('/movies/getDetailsByMovieId', { id: this.id });
			if (code) {
				this.movieDetails = result;
				this.coverUrl = `url(${result.movies.cover})`;
				console.log(result);
			}
		},
		handlePlotContent(e){
			if(e.currentTarget.id=='open'){
				this.isClosed = false;
			} else{
				this.isClosed = true;
			}
		}
	}
};
</script>

<style scoped lang="scss">
.movie-container {
	height: 100vh;
	background-repeat: no-repeat;
	background-size: contain;
	position: relative;
	box-sizing: border-box;
	z-index: 1;
	&:after {
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background: inherit;
		filter: blur(2px);
		z-index: 2;
	}
}

.detail-container {
	position: absolute;
	top: 175rpx;
	left: 0rpx;
	width: 100vw;
	// height: calc(100vh - 175rpx);
	border-radius: 40rpx 40rpx 0 0;
	background-color: #3b3e45;
	padding-bottom: 60rpx;
	z-index: 10;
	.header {
		display: flex;
		justify-content: space-between;
		height: 400rpx;
		margin-bottom: 30rpx;
		.movie-cover {
			width: 300rpx;
			image {
				position: absolute;
				top: -40rpx;
				left: 30rpx;
				width: 300rpx;
				height: 400rpx;
				border-radius: 20rpx;
			}
		}
		.info {
			position: relative;
			width: calc(100vw - 330rpx);
			height: 360rpx;
			// background-color: pink;
			.info-content {
				position: absolute;
				left: 0;
				bottom: 50rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				box-sizing: border-box;
				width: 100%;

				text {
					width: 100%;
					box-sizing: border-box;
					padding: 0 20rpx;
					margin-bottom: 20rpx;
					&:last-of-type {
						margin-bottom: 0;
					}
					&.title {
						font-size: 60rpx;
						color: #fff;
					}
					&.more {
						font-size: 28rpx;
						color: #7e848d;
					}
					&.rating {
						font-size: 32rpx;
						color: $uni-color-secondary;
						font-weight: bold;
						.star {
							width: 20rpx;
							height: 20rpx;
							color: $uni-color-secondary;
							padding: 0;
							margin-right: 20rpx;
						}
					}
				}
			}
		}
	}

	.buttons {
		display: flex;
		justify-content: space-around;
		view {
			width: 350rpx;
			height: 70rpx;
			border-radius: 60rpx;
			font-size: 36rpx;
			color: #fff;
			background-color: $uni-color-secondary;
			text-align: center;
			line-height: 70rpx;
			text {
				font-size: 36rpx;
			}
		}
	}

	.plot-section,
	.comments-section,
	.actors-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		margin-top: 30rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		color: #fff;
		view {
			width: 100%;
		}
		.title {
			height: 50rpx;
			padding-bottom: 20rpx;
		}
	}

	.plot-section {
		.plot-content {
			display: -webkit-box; /*设置为弹性盒子*/
			height: 500rpx;
			max-height: 600rpx;
			color: #9b9fac;
			font-size: 28rpx;
			transition: all .5s linear;
		}
		.closed{
			height: 190rpx;
			max-height: 200rpx;
			-webkit-box-orient: vertical;
			overflow: hidden; /*超出隐藏*/
			text-overflow: ellipsis; /*超出显示为省略号*/
			word-break: break-all; /*强制英文单词自动换行*/
			-webkit-line-clamp: 5; 
		}
		.extend-content {
			display: flex;
			justify-content: flex-end;
			padding-top: 20rpx;
			height: 80rpx;
			text-align: right;
			
			.open,.close{
				width: 160rpx;
				height: 48rpx;
			}
			.icon-close{
				margin-left: 20rpx;
			}
		}
	}

	.actors-section {
		.actors {
			display: flex;
			height: 500rpx;
			.actor {
				width: 340rpx;
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 20rpx;
				&:last-of-type {
					margin-right: 0;
				}
				image {
					width: 325rpx;
					height: 325rpx;
					border-radius: 10rpx;
					margin-bottom: 20rpx;
				}
				text {
					width: 100%;
					text-align: left;
					color: #fff;
				}
			}
		}
	}

	.comments-section {
		.short-comment {
			font-size: 26rpx;
			color: #9b9fac;
		}
	}
}
</style>
